<template>
  <div class="digital-status-bar-chart" id="digital_status_bar_chart_id"></div>
</template>

<script>
  import echarts from 'echarts'
  import {transDateTime} from '../../utils/public'

  export default {

    name: "index",
    data() {
      return {
        echarts: null
      };
    },
    methods: {
      setData(typeInvObj) {
        this.echarts = echarts.init(document.getElementById('digital_status_bar_chart_id'));
        let seriesDataArr = [];
        let bArr = ['停止', '启动', '', '信息中断'];
        let colorArr = ['#e60013', '#4dee58', '', '#878484'];
        let barColorArr = [['#eb0764', '#e60013'], ['#48eb42', '#70ffac'], '', ['#8994b8', '#37394a']];
        typeInvObj.typeArr.forEach(function (type) {
          let seriesObj = {
            name: bArr[type.type],
            type: 'bar',
            barWidth: 20,
            stack: 'barChart',
            label: {
              normal: {
                borderWidth: 10,
                distance: 20,
                align: 'center',
                verticalAlign: 'middle',
                borderRadius: 1,
                borderColor: colorArr[type.type],
                backgroundColor: colorArr[type.type],
                show: true,
                position: 'top',
                formatter: '{a}',
                color: '#000'
              }
            },
            itemStyle: {
              color: colorArr[type.type]
            },
            data: [{
              value: type.timeDifference,
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
                    offset: 0,
                    color: barColorArr[type.type][0]
                  }, {
                    offset: 1,
                    color: barColorArr[type.type][1]
                  }])
                }
              }
            }]
          };
          seriesDataArr.push(seriesObj);
        });
        let option = {
          backgroundColor: '#383b3e',
          title: {
            show: true,
            text: '设备运行状态变化',
            textStyle: {
              color: '#FFFFFF'
            },
            left: '43%',
            top: '10px'

          },
          tooltip: {
            show: true,
            formatter: function (params, a, b) {
              let text = params.seriesName + '时长 : ' + transDateTime(params.value);
              return text;
            }

          },
          legend: {
            icon: "circle",
            top: '43',
            left: '10',
            itemWidth: 7,
            itemHeight: 7,
            itemGap: 40,
            textStyle: {
              color: '#89A7AF',
            },
            data: [{
              name: '启动'
            },
              {
                name: '停止'
              },
              {
                name: '信息中断'
              }
            ]
          },
          xAxis: [{
            max: typeInvObj.total_num,
            type: 'value',

            axisTick: {
              show: true,
            },
            axisLine: {
              show: true,
            },
            axisLabel: {
              rotate: 20,
              formatter: function (value, index) {
                var date = new Date(new Date(typeInvObj.frist_datetime).getTime() + value);
                return '\n' + date.getFullYear() + '-' + (date.getMonth() + 1)
                  + '-' + date.getDate() + '\n' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
              },
              show: true,
              align: 'top',
              textStyle: {
                color: '#fff',
              }
            },
            position: 'bottom',
            splitLine: {lineStyle: {type: 'dashed'}},

          }],
          /*          dataZoom: [{
                      type: 'slider',
                      xAxisIndex: 0,
                      filterMode: 'empty',
                      height: 20,
                      start: 0,
                      end: 100
                    }, {
                      type: 'inside',
                      xAxisIndex: 0,
                      filterMode: 'empty',
                      height: 20,
                      start: 0,
                      end: 100
                    }],*/
          yAxis: [{
            height: 200,
            type: 'category',
            max: 1,
            width: 20,
            data: [''],

            axisTick: {
              show: true,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              align: 'right',
              textStyle: {
                color: '#fff',
              }
            }

          }],
          series: seriesDataArr
        };
        this.echarts.setOption(option);
      }
    }
  }
</script>

<style lang="scss" scoped>
  .digital-status-bar-chart {
    background-color: #383b3e;
    height: 320px;
  }

</style>
